<template>
	<div>
		<block v-if="!item.continue || item.name === 'table' || item.name === 'ol' || item.name === 'ul' || item.name === 'text'">
			<uText :item="item" :space="space" />
		</block>

		<block v-else-if="item.name === 'img'">
			<uImage :item="item" :preview="preview" :imgList="imgList" />
		</block>

		<block v-else-if="item.name === 'video'">
			<uVideo :item="item" />
		</block>

		<block v-else-if="item.name === 'a'">
			<uHref :item="item" :space="space" :selectable="selectable" />
		</block>

		<block v-else>
			<view
				v-if="item.children && item.children.length > 0"
				:style="
					item.attrs.style +
					(item.attrs.align ? ';text-align:' + item.attrs.align : '') +
					(item.name === 'strong' ? ';font-weight:bold' : '')
				"
			>
				<block v-for="(subItem, subIndex) in item.children" :key="subIndex">
					<list
						:item="subItem"
						:imgList="imgList"
						:space="space"
						:selectable="selectable"
						:preview="preview"
					/>
				</block>
			</view>
			
			<block v-else>
				<uText :item="item" :space="space" />
			</block>
		</block>
	</div>
</template>

<script>
	import uVideo from "./parse_video.vue";
	import uImage from "./parse_image.vue";
	import uHref from "./parse_href.vue";
	import uText from "./parse_text.vue";
	import list from "./parse_list.vue";

	export default {
		name: "list",
		components: {
			uVideo,
			uImage,
			uHref,
			uText,
			list,
		},
		props: {
			/**
			 * 内容
			 */
			item: {
				type: Object,
				default: null,
			},
			space: {
				type: String,
				default: "",
			},

			selectable: {
				type: Boolean,
				default: true,
			},

			preview: {
				type: Boolean,
				default: true,
			},

			imgList: {
				type: Array,
				default: [],
			},
		},
	};
</script>

<style></style>
